import React, { useState, useEffect } from "react";
import { Table, Button, Space, Modal, Form, Input, message } from "antd";
import { PlusOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons";

const User = () => {
  const [users, setUsers] = useState([]);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [form] = Form.useForm();
  const [editingId, setEditingId] = useState(null);

  // Mock data - replace with actual API calls
  useEffect(() => {
    setUsers([
      { id: 1, username: "admin", email: "admin@example.com", role: "管理员" },
      { id: 2, username: "user", email: "user@example.com", role: "普通用户" },
    ]);
  }, []);

  const columns = [
    {
      title: "用户名",
      dataIndex: "username",
      key: "username",
    },
    {
      title: "邮箱",
      dataIndex: "email",
      key: "email",
    },
    {
      title: "角色",
      dataIndex: "role",
      key: "role",
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space>
          <Button
            type="primary"
            icon={<EditOutlined />}
            onClick={() => handleEdit(record)}
          >
            编辑
          </Button>
          <Button
            danger
            icon={<DeleteOutlined />}
            onClick={() => handleDelete(record.id)}
          >
            删除
          </Button>
        </Space>
      ),
    },
  ];

  const handleAdd = () => {
    setEditingId(null);
    form.resetFields();
    setIsModalVisible(true);
  };

  const handleEdit = (record) => {
    setEditingId(record.id);
    form.setFieldsValue(record);
    setIsModalVisible(true);
  };

  const handleDelete = (id) => {
    Modal.confirm({
      title: "确认删除",
      content: "确定要删除这个用户吗？",
      onOk: () => {
        setUsers(users.filter((user) => user.id !== id));
        message.success("删除成功");
      },
    });
  };

  const handleModalOk = () => {
    form.validateFields().then((values) => {
      if (editingId) {
        setUsers(
          users.map((user) =>
            user.id === editingId ? { ...values, id: editingId } : user
          )
        );
        message.success("更新成功");
      } else {
        const newUser = {
          ...values,
          id: Math.max(...users.map((u) => u.id)) + 1,
        };
        setUsers([...users, newUser]);
        message.success("添加成功");
      }
      setIsModalVisible(false);
    });
  };

  return (
    <div>
      <Button
        type="primary"
        icon={<PlusOutlined />}
        onClick={handleAdd}
        style={{ marginBottom: 16 }}
      >
        添加用户
      </Button>

      <Table columns={columns} dataSource={users} rowKey="id" />

      <Modal
        title={editingId ? "编辑用户" : "添加用户"}
        open={isModalVisible}
        onOk={handleModalOk}
        onCancel={() => setIsModalVisible(false)}
      >
        <Form form={form} layout="vertical">
          <Form.Item
            name="username"
            label="用户名"
            rules={[{ required: true, message: "请输入用户名" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="email"
            label="邮箱"
            rules={[
              { required: true, message: "请输入邮箱" },
              { type: "email", message: "请输入有效的邮箱地址" },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="role"
            label="角色"
            rules={[{ required: true, message: "请输入角色" }]}
          >
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default User;
